<template>
  <div class="process">
    <h2>违规商品处理</h2>

    <div class="line-container">
      <div class="box">
        <el-input class="el-input" v-model="searchQuery" placeholder="输入商品信息搜索" @keyup.enter="searchprocess"></el-input>
        <el-button @click="deleteSelectedprocess" class="el-button process-box">
          <img src="../../assets/icons/down.png" alt="">
          批量审核
        </el-button>
      </div>

      <el-table :data="currentprocess" stripe ref="userTable" @selection-change="handleTableSelectionChange">
        <el-table-column type="selection" width="70"></el-table-column>
        <el-table-column label="商品信息" width="160">
          <template slot-scope="scope">
            <img :src="scope.row.GoodsPicture" alt="" style="width: 60px; height: 60px;">
            <div class="right" style="position: absolute;left: 80px;top: 22px;">
              <p>{{ scope.row.GoodsNamegoods }}</p>
              <p>{{ scope.row.GoodsId }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商家信息" width="140">
          <template slot-scope="scope">
            <div class="right">
              <p>{{ scope.row.UserName }}</p>
              <p>{{ scope.row.Phone }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="GoodsPrice" label="价格"></el-table-column>
        <el-table-column prop="GoodsScope" label="商品状态">
          <template slot-scope="scope">
            <span :style="{
              backgroundColor: getGoodsScopeColor(scope.row.GoodsScope),
              color: getGoodsScopeTextColor(scope.row.GoodsScope),
              padding: '3px 5px', borderRadius: '3px'
            }">
              {{ scope.row.GoodsScope }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="GoodsViolation" label="违规类型" width="150">
          <template slot-scope="scope">
            <span :style="{
              backgroundColor: getViolationColor(scope.row.GoodsViolation),
              color: getViolationTextColor(scope.row.GoodsViolation),
              padding: '3px 5px', borderRadius: '3px'
            }">
              {{ scope.row.GoodsViolation }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="GoodsTime" label="上架时间" width="180">
          <template slot-scope="scope">
            {{ formatTime(scope.row.GoodsTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="GoodsViolationState" label="处理状态" width="180">
          <template slot-scope="scope">
            <span>
              {{ scope.row.GoodsViolationState instanceof Array ? scope.row.GoodsViolationState.join(';') :
                scope.row.GoodsViolationState }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <p style="color: blue;cursor: pointer;" @click="showDetailDialog(scope.row)">查看详情</p>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 20, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalprocess">
      </el-pagination>
    </div>


    <div class="stats-container">
      <div class="stat">
        <h3>违规类型分布</h3>
        <div id="feedback-type-chart" style="width: 100%; height: 300px;"></div>
      </div>
      <div class="box-1">
        <h3>数据概览</h3>
        <div class="tie-1">
          <div class="tie" style="background-color: #EFF6FF;">
            待处理
            <p style="color: #5470C6;">{{ daichuli }}</p>
          </div>
          <div class="tie" style="background-color: #F0FDF4;">今日处理
            <p style="color: #28C890;">{{ todaychuli }}</p>
          </div>
          <div class="tie" style="background-color: #FAF5FF;">本周处理
            <p style="color: #F9A4FE;">{{ weekchuli }}</p>
          </div>
          <div class="tie" style="background-color: #FFF7ED;">累计处理
            <p style="color: #EBA1B7;">{{ totlechuli }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 查看详情弹窗 -->
    <el-dialog :visible.sync="dialogVisible" GoodsDescription="商品详情" width="700px">
      <el-form :model="detail" ref="editForm" label-width="200px">
        <div class="detail-row">
          <img :src="detail.GoodsPicture" style="border: 1px solid #ccc;width: 200px;height: 200px;" alt="">
          <div style="padding-left: 10px;">
            <div class="detail-item">
              <h3>{{ detail.GoodsNamegoods }}</h3>
              <h3 class="detail-label">商品ID：{{ detail.GoodsId }}</h3>
            </div>
            <div class="detail-item">
              <p class="detail-label">商家 <span>{{ detail.UserName }}</span></p>
            </div>

            <div class="detail-item">
              <p class="detail-label">价格 <span>{{ detail.GoodsPrice }}</span></p>
            </div>
            <div class="detail-item">
              <p class="detail-label">违规类型 <span>{{ detail.GoodsViolation }}</span></p>
            </div>
            <div class="detail-item">
              <p class="detail-label">上架时间 <span> {{ formatTime(detail.GoodsTime) }} </span></p>
            </div>

            <div class="detail-item">
              <p class="detail-label">商品描述 </p>
              <span>{{ detail.GoodsDescription }}</span>
            </div>
          </div>
        </div>
        <div style="margin-top: 20px;font-size: 16px;">
          <span style="margin:0 20px 10px 0;" class="detail-label">处理方式:</span>
          <div class="tag-container">
            <el-checkbox-group v-model="detail.GoodsViolationState" @change="handleStateChange">
              <el-checkbox label="店铺流量限制"></el-checkbox>
              <el-checkbox label="重新考核商家知识"></el-checkbox>
              <el-checkbox label="店铺限时整改"></el-checkbox>
              <el-checkbox label="信用扣分(3分)"></el-checkbox>
              <el-checkbox label="保证金冻结"></el-checkbox>
              <el-checkbox label="店铺屏蔽"></el-checkbox>
              <el-checkbox label="账号封禁"></el-checkbox>
            </el-checkbox-group>
            <div class="custom-tag-input">
              <el-input v-model="customTag" placeholder="输入自定义标签" @keyup.enter="addCustomTag"
                style="width: 150px; margin-left: 10px;"></el-input>
              <el-button @click="addCustomTag" size="small">+</el-button>
            </div>
          </div>
          <div class="tag-tip">最多选择3个处理方式</div>
        </div>
      </el-form>
      <div>
        <label class="detail-label" style="margin: 20px 0 10px 0;">处理说明：</label>
        <div class="detail-row detail-main">
          <el-input v-model="detail.GoodsViolationProcess" placeholder="请输入处理说明"></el-input>
          <el-button @click="saveGoodsViolation" class="send-button" style="margin-left: 10px;">发送</el-button>
        </div>
      </div>
      <span>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveGoodsViolation">确认</el-button>
      </span>
    </el-dialog>

    <!-- 批量处理提示框 -->
    <el-dialog :visible.sync="deleteDialogVisible" GoodsDescription="批量处理" width="500px">
      <h3 style="margin:-20px 0 20px 0;font-size: 18px;">处理数量 ({{ reviewedCount }}/{{ totalToReview }})</h3>
      <div v-if="selectedprocess.length > 0" style="display: flex; justify-content: space-around;">
        <img :src="selectedprocess[currentIndex].GoodsPicture" alt="" style="width: 180px; height: 180px;">
        <div class="pop">
          <p>名称<span>{{ selectedprocess[currentIndex].GoodsNamegoods }}</span></p>
          <p>价格 <span>￥{{ selectedprocess[currentIndex].GoodsPrice }}</span></p>
          <p>违规类型<span> {{ selectedprocess[currentIndex].GoodsViolation }}</span></p>
          <p>商品描述 <span style="display: block;">{{ selectedprocess[currentIndex].GoodsDescription }}</span></p>
        </div>
      </div>
      <div style="margin-top: 20px;font-size: 16px;">
        <span style="margin:0 20px 10px 0;" class="detail-label">处理方式:</span>
        <div class="tag-container">
          <el-checkbox-group v-model="detail.GoodsViolationState" @change="handleStateChange">
            <el-checkbox label="店铺流量限制"></el-checkbox>
            <el-checkbox label="重新考核商家知识"></el-checkbox>
            <el-checkbox label="店铺限时整改"></el-checkbox>
            <el-checkbox label="信用扣分(3分)"></el-checkbox>
            <el-checkbox label="保证金冻结"></el-checkbox>
            <el-checkbox label="店铺屏蔽"></el-checkbox>
            <el-checkbox label="账号封禁"></el-checkbox>
          </el-checkbox-group>
          <div class="custom-tag-input">
            <el-input v-model="customTag" placeholder="输入自定义标签" @keyup.enter="addCustomTag"
              style="width: 150px; margin-left: 10px;"></el-input>
            <el-button @click="addCustomTag" size="small">+</el-button>
          </div>
        </div>
        <div class="tag-tip">最多选择3个处理方式</div>
      </div>
      <div>
        <label class="detail-label" style="margin: 20px 0 10px 0;">处理说明：</label>
        <div class="detail-row detail-main">
          <el-input v-model="detail.GoodsViolationProcess" placeholder="请输入处理说明"></el-input>
          <el-button @click="confirmBatchReview" class="send-button" style="margin-left: 10px;">发送</el-button>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">关闭</el-button>
        <el-button @click="confirmBatchReview">确认提交</el-button>
        <el-button @click="handleNextItem">下一个</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import jq from "jquery";
import { Message } from 'element-ui';
import * as echarts from 'echarts';
export default {
  data() {
    return {
      process: [],
      searchQuery: '',
      currentPage: 1,
      pageSize: 10,
      totalprocess: 0,
      detail: { GoodsViolationState: [] },
      dialogVisible: false,
      remark: '',
      selectedCategory: '',
      selectedSeller: '',
      startTime: '',
      endTime: '',
      selectedStatus: '',
      batchStatus: '',
      batchRemark: '',
      selectedprocess: [],
      currentIndex: 0,
      deleteDialog: false, // 控制删除确认弹窗显示隐藏
      deleteUserNames: [], // 存储要删除的用户姓名
      GoodsViolationState: '待处理', // 默认状态
      GoodsViolationProcess: '', // 处理记录字段
      feedbackTypeData: [
        { value: 30, name: '商品相关' },
        { value: 25, name: '物流相关' },
        { value: 40, name: '售后服务' },
        { value: 15, name: '系统建议' },
        { value: 46, name: '其他' }
      ],
      daichuli: 24,
      todaychuli: 18,
      weekchuli: 126,
      totlechuli: 1286,
      deleteDialogVisible: false,
      customTag: '',
      userPhones: {}, // 存储用户ID和电话的映射
      localBatchData: [] // ：初始化批量处理数据缓存数组
    };
  },
  mounted() {
    this.initFeedbackTypeChart();
    this.fetchData();
  },
  computed: {
    currentprocess() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      let filteredprocess = this.process.filter(user => {
        const isSearchMatch = user.GoodsNamegoods.includes(this.searchQuery) || String(user.GoodsId).includes(this.searchQuery);
        const isCategoryMatch = this.selectedCategory === '' || user.kindgoods === this.selectedCategory;
        const isSellerMatch = this.selectedSeller === '' || user.UserName === this.selectedSeller;
        const isStartTimeMatch = this.startTime === '' || new Date(user.GoodsTime) >= new Date(this.startTime);
        const isEndTimeMatch = this.endTime === '' || new Date(user.GoodsTime) <= new Date(this.endTime);
        const isStatusMatch = this.selectedStatus === '' || user.GoodsViolationState === this.selectedStatus;
        return isSearchMatch && isCategoryMatch && isSellerMatch && isStartTimeMatch && isEndTimeMatch && isStatusMatch;
      });
      return filteredprocess.slice(start, end);
    },
    totalToReview() {
      return this.selectedprocess.length;
    },
    reviewedCount() {
      return this.currentIndex + (this.batchStatus ? 1 : 0);
    }
  },
  methods: {
    addCustomTag() {
      this.detail.GoodsViolationState = this.detail.GoodsViolationState.filter(item => item !== '待处理');
      if (this.detail.GoodsViolationState.length >= 3) {
        Message.warning('最多只能选择3个处理方式');
        return;
      }
      const tag = this.customTag.trim();
      if (tag) {
        if (!this.detail.GoodsViolationState.includes(tag)) {
          this.detail.GoodsViolationState.push(tag);
        }
        this.customTag = '';
      }
    },
    saveGoodsViolation() {
      // 处理多选值转换为字符串存储
      const selectedTags = this.detail.GoodsViolationState.join(';');
      this.detail.GoodsScope = '下架中'; // 其他情况保持上架中
      // 调用接口保存处理记录
      this.goodsviolation(this.detail.GoodsId, this.detail.GoodsViolation, selectedTags, this.detail.GoodsViolationProcess, this.detail.GoodsScope)
        .then(() => {
          Message.success('处理记录保存成功');
          // 更新原数据
          const index = this.process.findIndex(u => u.GoodsId === this.detail.GoodsId);
          if (index !== -1) {
            this.process[index].GoodsViolationState = selectedTags;
            this.process[index].GoodsScope = this.detail.GoodsScope; // 更新商品状态
          }
        })
        .catch(error => {
          console.error('更新失败', error);
        });
    },
    formatTime(timeStr) {
      if (!timeStr) return '';
      const date = new Date(timeStr);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    },
    confirmEdit() {
      console.log('123')
    },
    fetchData() {
      // 先获取用户数据
      this.getUser().then(() => {
        // 再获取商品数据
        this.getData();
      });
    },
    getUser() {
      return new Promise((resolve) => {
        const _this = this;
        jq.ajax({
          type: "get",
          url: "http://127.0.0.1:3000/usermess",
          success(res) {
            if (res.data) {
              // 建立用户ID和电话的映射
              res.data.forEach(user => {
                _this.userPhones[user.UserId] = user.Phone;
              });
            }
            resolve();
          }
        });
      });
    },
    getData() {
      let _this = this;
      jq.ajax({
        type: "get",
        url: "http://127.0.0.1:3000/getShopData",
        success(res) {
          if (res.data) {
            _this.process = res.data
              .filter(goods => goods.GoodsViolation)
              .map(goods => ({
                ...goods,
                Phone: _this.userPhones[goods.UserId] || '',
                GoodsViolationState: goods.GoodsViolationState
                  ? goods.GoodsViolationState.split(';')
                  : ['待处理'] // 默认处理状态
              }));
            console.log('_this.process', _this.process);
            _this.totalprocess = _this.process.length;
          }
        }
      });
    },
    goodsviolation(GoodsId, GoodsViolation, GoodsViolationState, GoodsViolationProcess, GoodsScope) {
      let _this = this;
      return new Promise((resolve, reject) => {
        jq.ajax({
          type: 'PUT',
          url: 'http://127.0.0.1:3000/goodsviolation',
          data: {
            GoodsId: GoodsId,
            GoodsViolation: GoodsViolation,
            GoodsViolationState: GoodsViolationState,
            GoodsViolationProcess: GoodsViolationProcess,
            GoodsScope: GoodsScope,
          },
          success(res) {
            console.log('接口响应123:', res);
            if (res.status === 200) {
              Message.success('违规商品处理状态更新成功');
              _this.getData();
              resolve(res);
            } else {
              Message.error('更新失败，请重试');
              reject(res);
            }
          },
          error(err) {
            console.log('网络错误:', err);
            reject(err);
          }
        });
      });
    },
    handleStateChange(val) {
      // 自动移除"待处理"状态
      if (val.includes('待处理')) {
        const index = val.indexOf('待处理');
        val.splice(index, 1);
      }
      // 长度限制
      if (val.length > 3) {
        Message.warning('最多只能选择3个处理方式');
        val.splice(3);
      }
      this.detail.GoodsViolationState = val;
    },
    search() {
      const filteredprocess = this.process.filter(user => {
        const isSearchMatch = user.GoodsNamegoods.includes(this.searchQuery) || String(user.GoodsId).includes(this.searchQuery);
        const isCategoryMatch = this.selectedCategory === '' || user.kindgoods === this.selectedCategory;
        const isSellerMatch = this.selectedSeller === '' || user.UserName === this.selectedSeller;
        const isStartTimeMatch = this.startTime === '' || new Date(user.GoodsTime) >= new Date(this.startTime);
        const isEndTimeMatch = this.endTime === '' || new Date(user.GoodsTime) <= new Date(this.endTime);
        const isStatusMatch = this.selectedStatus === '' || user.GoodsViolationState === this.selectedStatus;
        return isSearchMatch && isCategoryMatch && isSellerMatch && isStartTimeMatch && isEndTimeMatch && isStatusMatch;
      });
      this.totalprocess = filteredprocess.length;
      // 这里可以编写调用后端接口的逻辑，将搜索条件传递过去
      console.log('搜索条件：', {
        searchQuery: this.searchQuery,
        selectedCategory: this.selectedCategory,
        selectedSeller: this.selectedSeller,
        startTime: this.startTime,
        endTime: this.endTime,
        selectedStatus: this.selectedStatus
      });
    },
    reset() {
      // 重置所有输入框和选择框的值
      this.searchQuery = '';
      this.selectedCategory = '';
      this.selectedSeller = '';
      this.startTime = '';
      this.endTime = '';
      this.selectedStatus = '';
    },
    searchprocess() {
      this.currentPage = 1;
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    },
    initFeedbackTypeChart() {
      const chartDom = document.getElementById('feedback-type-chart');
      const myChart = echarts.init(chartDom);
      const option = {
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            data: this.feedbackTypeData,
            label: {
              formatter: '{b}: {c}'
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    getGoodsScopeColor(GoodsScope) {
      switch (GoodsScope) {
        case '上架中':
          return '#F3E5F5';
        case '下架中':
          return '#E0FFFF';
        default:
          return 'black';
      }
    },
    getViolationColor(GoodsViolation) {
      switch (GoodsViolation) {
        case '虚假宣传':
          return '#E0F2F7';
        case '商品信息不完整':
          return '#FFE4E1';
        case '违禁品':
          return '#FFFFE0';
        case '商品质量问题':
          return '#E8F5E9';
        default:
          return 'transparent';
      }
    },
    getViolationTextColor(GoodsViolation) {
      switch (GoodsViolation) {
        case '虚假宣传':
          return '#0056b3';
        case '商品信息不完整':
          return '#8B0000';
        case '违禁品':
          return '#B8860B';
        case '商品质量问题':
          return '#006400';
        default:
          return 'black';
      }
    },
    getGoodsScopeTextColor(GoodsScope) {
      switch (GoodsScope) {
        case '上架中':
          return '#6A1B9A';
        case '下架中':
          return '#008B8B';
        default:
          return 'black';
      }
    },
    showDetailDialog(row) {
      console.log("查看详情点击成功");
      // 确保row有值
      if (row) {
        this.detail = row;
        this.dialogVisible = true;
      } else {
        console.error('传递的行数据row未定义');
      }
    },

    handleTableSelectionChange(selection) {
      this.selectedprocess = selection;
      this.deleteUserNames = selection.map(user => user.GoodsNamegoods);
    },

    // 打开批量审核弹窗
    deleteSelectedprocess() {
      // 修改为正确的表格数据获取方式
      const allRows = this.$refs.userTable.store.states.data;
      const selectedRows = this.$refs.userTable.selection;
      if (allRows.length === selectedRows.length) {
        // 过滤待处理状态的商品
        this.selectedprocess = selectedRows.filter(user =>
          user.GoodsViolationState.includes('待处理')
        );
        if (this.selectedprocess.length > 0) {
          this.currentIndex = 0;
          this.deleteDialogVisible = true;
        } else {
          Message.info('没有待处理的商品可供批量处理');
        }
      } else {
        Message.info('请全选商品后再进行批量处理');
      }
    },
    handleNextItem() {
    if (!this.detail.GoodsViolationProcess.trim()) {
        Message.warning('请填写处理说明');
        return;
    }

    const currentUser = this.selectedprocess[this.currentIndex];
    const selectedTags = this.detail.GoodsViolationState.join(';');

    // 保存到本地缓存
    this.localBatchData.push({
        GoodsId: currentUser.GoodsId,
        GoodsViolation: currentUser.GoodsViolation,
        GoodsViolationState: selectedTags,
        GoodsViolationProcess: this.detail.GoodsViolationProcess,
        GoodsScope: '下架中'
    });

    // 更新本地商品数据
    const index = this.process.findIndex(u => u.GoodsId === currentUser.GoodsId);
    if (index !== -1) {
        this.process[index] = {
            ...this.process[index],
            GoodsViolationState: selectedTags,
            GoodsViolationProcess: this.detail.GoodsViolationProcess,
            GoodsScope: '下架中'
        };
    }

    if (this.currentIndex < this.selectedprocess.length - 1) {
        this.currentIndex++;
        // 初始化新商品的处理状态
        this.detail = {
            ...this.selectedprocess[this.currentIndex],
            GoodsViolationState: []
        };
        Message.info('请继续处理下一个商品');
    } else {
        Message.info('所有商品已处理完毕，点击"确认提交"完成操作');
    }
},

confirmBatchReview() {
    // 处理当前正在处理的数据
    if (this.detail.GoodsViolationProcess.trim()) {
        const currentUser = this.selectedprocess[this.currentIndex];
        const selectedTags = this.detail.GoodsViolationState.join(';');
        this.localBatchData.push({
            GoodsId: currentUser.GoodsId,
            GoodsViolation: currentUser.GoodsViolation,
            GoodsViolationState: selectedTags,
            GoodsViolationProcess: this.detail.GoodsViolationProcess,
            GoodsScope: '下架中'
        });
    }

    if (this.localBatchData.length === 0) {
        Message.warning('没有需要提交的数据');
        return;
    }

    // 批量提交数据
    this.batchUploadToServer()
      .then(() => {
            this.deleteDialogVisible = false;
            this.detail = {};
            this.selectedprocess = [];
            this.currentIndex = 0;
            this.localBatchData = [];
            this.getData();
            Message.success('已提交全部处理数据');
        })
      .catch(error => {
            console.error('批量上传失败', error);
            Message.error('批量处理失败，请重试');
        });
},

    // 确保 batchUploadToServer 正确处理所有请求
batchUploadToServer() {
    return new Promise((resolve, reject) => {
        if (this.localBatchData.length === 0) {
            resolve();
            return;
        }
        // 遍历所有缓存数据发送请求
        const requests = this.localBatchData.map(item =>
            this.goodsviolation(
                item.GoodsId,
                item.GoodsViolation,
                item.GoodsViolationState,
                item.GoodsViolationProcess,
                item.GoodsScope
            )
        );
        Promise.all(requests)
          .then(() => resolve())
          .catch(reject);
    });
}    
  },
  created() {
    this.totalprocess = this.process.length;
  }
}
</script>

<style lang="less" scoped>
.process {
  padding: 70px 20px 20px 230px;
  background-color: #F9FAFB;
  width: 100%;

  h2 {
    display: block;
    visibility: visible;
    margin-left: 10px;
  }

  .line-container {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid #e9e8e8;
    background-color: #ffffff;
    position: relative;
    margin: 20px 10px;
    width: 98%;

    .box {
      height: 80px;

      .el-input {
        margin: 20px;
        width: 400px;
        height: 40px;
        padding-left: 20px;
        color: #5d5a5a;
        font-size: 16px;

        span {
          padding: 10px;
        }

        input {
          padding: 10px 34px;
          border-radius: 5px;
          border: 1px solid #e2e2e2;
          color: #5d5a5a;
        }
      }

      .el-button {
        padding: 15px 20px;
        border-radius: 8px;


        img {
          position: relative;
          top: 2px;
          width: 15px;
          height: 15px;
        }
      }

      .process-box {
        background-color: #1f3ff1;
        color: white;
        position: absolute;
        top: 14px;
        right: 25px;
        padding: 18px 25px;
      }
    }
  }

  .pop {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;

    p {
      font-size: 16px;
      color: #757171;

      span {
        margin-left: 10px;
        color: #2e2c2c;
      }
    }
  }

  .stats-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 95%;
    padding: 20px;
    height: 400px;
    margin: 0 auto !important;

    /* 关键代码，实现水平居中 */
    .stat {
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      border: 1px solid #e9e8e8;
      background-color: white;
      width: 46%;
      padding: 20px;
    }

    .box-1 {
      margin: 0 30px;
      padding: 20px;
      width: 46%;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      border: 1px solid #e9e8e8;
      background-color: white;

      .tie-1 {
        margin: 20px 0 0 20px;
        display: flex;
        flex-wrap: wrap;

        .tie {
          font-size: 16px;
          font-weight: bold;
          height: 100px;
          width: 40%;
          box-sizing: border-box;
          padding: 20px;
          margin: 20px;
          color: #817e7e;
          border-radius: 10px;

          p {
            font-size: 25px;
            margin-top: 10px;
          }
        }
      }

    }
  }

  .detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    width: 100%;
  }

  .detail-main {
    width: 90%;
  }

  .detail-item {
    flex: 1;
    margin-right: 10px;
  }

  .detail-label {
    display: block;
    color: rgb(160, 160, 160);
    margin-bottom: 5px;
    font-weight: normal;

    span {
      color: rgb(51, 43, 43);
      margin-left: 10px;
    }
  }

  .close-button {
    background-color: #f4f4f4;
    color: #666;
    border: 1px solid #ccc;
  }

  .send-button {
    background-color: #409eff;
    color: white;
    border: none;
  }

  .confirm-button {
    background-color: #27c24c;
    color: white;
    border: none;
  }

  .stats-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px 10px;
  }

  .stat-item {
    width: calc(50%-20px);
    margin-bottom: 20px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid #e9e8e8;
    background-color: white;
    border-radius: 5px;
    padding: 20px;
  }

  .stat-item-1 {
    width: calc(25%-20px);
    margin-bottom: 20px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid #e9e8e8;
    background-color: white;
    border-radius: 5px;
    padding: 20px;
  }

  .stat-value {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .stat-change {
    color: green;
  }

  .increase {
    color: green;
  }

  .decrease {
    color: red;
  }

  .stat-tip {
    color: rgb(255, 115, 0);
  }

  .tag-container {
    display: flex;
    align-items: center;

    .custom-tag-input {
      display: flex;
      align-items: center;
    }
  }

  .tag-tip {
    color: #999;
    font-size: 14px;
    margin-top: 5px;
  }

  .el-checkbox {
    margin-right: 15px;
  }

  .el-checkbox:last-child {
    margin-right: 0;
  }
}
</style>